
<template>
  <div>
    <h1>演示AJAX的封装</h1>
    <h1>角色管理</h1>
    
    <h2>无任何业务逻辑的单表CRUD演示</h2>
    <el-divider>axios演示</el-divider>
    <el-button @click="getRoleList">获取角色列表</el-button>
    <div>{{ roleList }}</div>
  </div>
</template>

<script setup>
//演示AJAX的封装

import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";

// import axios from "axios";//直接使用axios
// import instance from "@/api/ajax";//使用封装了的axios,指定访问的基础路径为/api,统一处理错误提示,加载动画
import roleApi from "@/api/sys/RoleApi";

const roleList = reactive({}); //定义复制的响应式数据


// const instance = axios.create({
//   // baseURL: 'http://127.0.0.1:8081/api',//直接访问后端工程,存在跨域问题
//   baseURL:"/api",//需要在vite.config.js中配置反向代理
//   timeout: 1000
// });

/**
 * 定义可绑定的函数
 */
const getRoleList = () => {
  ElMessage.success("成功提示");
  // instance.get("/sys/role/list").then(r=>{
  roleApi.list().then(r=>{
    console.debug(r);
    roleList.list=r.data.data;
  });
};

/**
 * 组件挂载事件
 */
onMounted(() => {});
</script>

<style  scoped>
</style>